<template>
  <div id="category-card">
    <!-- 分类列表 -->
    <div class="card">
      <van-grid :border="true" :column-num="4">
        <van-grid-item v-for="category in categories" :key="category.categoryId" @click="openCategoryInfoView(category)">
          <van-image radius="15px" style="width: 70px; height: 70px;" :src="require('@/'+`${category.icon}`)" fit="contain"/>
          <span style="font-size: 12px;">{{ category.categoryName }}</span>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { Grid as VanGrid, GridItem as VanGridItem } from 'vant';
import { Image as VanImage } from 'vant'

export default {
  name: "category-card",
  components: {
    VanGrid,
    VanGridItem,
    VanImage
  },
  data() {
    return {
      currentCategory: {
        id: 0,
        name: "",
        images:"",
        description: ""
      }
    }
  },
  props: {
    categories: {
      type: Array,
      required: true
    }
  },
  methods: {
    openCategoryInfoView(category) {
      this.currentCategory.id = category.categoryId;
      this.currentCategory.name = category.categoryName;
      this.currentCategory.images = category.icon;
      console.log("currentCategory.images="+this.currentCategory.images )
      this.currentCategory.description = category.description;
      this.updateCurrentCategory(this.currentCategory);
      this.$emit('openCategoryInfoView');
    },
    updateCurrentCategory(category) {
      this.$emit('updateCurrentCategory', category)
    }
  }
}
</script>

<style scope>
.card {
  border-radius: 15px;
  overflow: hidden;
}
</style>